<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>layout 后台大布局 - Layui</title>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<link rel="stylesheet" href="../css/userinfo.css">
	</head>

	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo"><img src="../image/logo.png" style="width: 200px; height: 58px;"></div>	
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item"><a href="">首页</a></li>
					<li class="layui-nav-item"><a href="">商品管理</a></li>
					<li class="layui-nav-item"><a href="">用户</a></li>
					<li class="layui-nav-item">
						<a href="javascript:;">其它系统</a>
						<dl class="layui-nav-child">
							<dd><a href="">邮件管理</a></dd>
							<dd><a href="">消息管理</a></dd>
							<dd><a href="">授权管理</a></dd>
						</dl>
					</li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
							贤心
						</a>
						<dl class="layui-nav-child">
							<dd><a href="">修改个人信息</a></dd>
							<dd><a href="">安全设置</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">退了</a></li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="test">
						<li class="layui-nav-item">
							<a class="" href="javascript:;"><i class="layui-icon"> &#xe637; </i>考勤</a>
							<dl class="layui-nav-child">
								<dd><a href="punch.html">打卡</a></dd>
								<dd><a href="Empattence.html"  >自我考勤查看</a></dd>
								<dd><a href="Deptpattence.html" >部门考勤查看</a></dd>
								<dd><a href="Hrpattence.html">员工考勤查看</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;"><i class="layui-icon">&#xe613; </i>请假管理</a>
							<dl class="layui-nav-child">
								<dd><a href="leavepage.html">请假申请</a></dd>
								<dd><a href="leavelist.html">请假审批</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item layui-nav-itemed"><a href="javascript:;"><i class="layui-icon">&#xe716; </i>管理</a>
							<dl class="layui-nav-child">
								<dd><a href="Emp.html">员工管理</a></dd>
								<dd><a href="Dept.html">部门管理</a></dd>
								<dd><a href="userinfo.html" class="layui-this">个人信息管理</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item"><a href="Note.html">公告</a></li>
					</ul>
				</div>
			</div>

			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div class="layui-container">
					<div class="layui-row" style="height: 50px;"></div>
					<div class="layui-row layui-row layui-col-space15">
						<div class="layui-col-md4">
							<div class="layui-card">
								<div class="layui-card-header">
									<i class="layui-icon layui-icon-friends" style="font-size: 20px; color: #1E9FFF;"></i>
									<span>员工个人信息</span>
								</div>
								<div class="layui-card-header userheader">
									<div>
										<img src="../image/user/1.png" alt="个人头像" class="userheader userimg">
									</div>
								</div>
								<div class="layui-card-header">
									<span>员工类型:</span>
									<span class="usermsg">部门经理</span>
								</div>
								<div class="layui-card-header">
									<span>员工岗位:</span>
									<span class="usermsg">人事经理</span>
								</div>
								<div class="layui-card-header">
									<span>入职时间:</span>
									<span class="usermsg">2018-07-12</span>
								</div>
								<div class="layui-card-header">
									<span>最近登入:</span>
									<span class="usermsg">登陆中</span>
								</div>
							</div>
						</div>
						<div class="layui-col-md1"></div>
						<div class="layui-col-md7">
							<div class="layui-card">
								<div class="layui-card-header" style="height: 60px;"></div>
								<div class="layui-card-header">
									<div class="username">提莫队长</div>
								</div>
								<div class="layui-card-header">
									<div class="layui-col-md4">员工编号</div>
									<div class="layui-col-md4">1007</div>
								</div>
								<div class="layui-card-header">
									<div class="layui-col-md4">员工姓名:</div>
									<div class="layui-col-md4">提莫队长</div>
								</div>
								<div class="layui-card-header">
									<div class="layui-col-md4">员工姓名:</div>
									<div class="layui-col-md4">提莫队长</div>
								</div>
								<div class="layui-card-header">
									<div class="layui-col-md4">所属部门:</div>
									<div class="layui-col-md4">人力资源部</div>
								</div>
								<div class="layui-card-header">
									<div class="layui-col-md4">员工邮箱:</div>
									<div class="layui-col-md4">1561616@nkndi.com</div>
								</div>
								<div class="layui-card-header">
									<div class="layui-col-md4">最后更新时间:</div>
									<div class="layui-col-md4">2018-07-12 18:32</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-row" style="height: 50px;"></div>
					<div class="layui-row">
						<div class="layui-collapse">
							<div class="layui-colla-item">
								<h2 class="layui-colla-title">修改个人信息</h2>
								<div class="layui-colla-content">
									<div class="layui-row layui-col-space15">
										<div class="layui-col-md1"></div>
										<div class="layui-col-md4">
											<div class="layui-upload">
												<button type="button" class="layui-btn" id="test1">上传头像</button>
												<button type="button" class="layui-btn" id="test9">开始上传</button>
												<div class="layui-upload-list">
													<img class="layui-upload-img userphoto" id="demo1">
													<p id="demoText"></p>
												</div>
											</div>
										</div>
										<div class="layui-col-md7 ">
											<div class="">请谨慎提交个人信息, 提交后等待管理员审核</div>
											<div class="layui-card-header" style="height: 15px;"></div>
											<form class="layui-form" action="">
												<div class="layui-form-item">
													<label class="layui-form-label">员工姓名</label>
													<div class="layui-input-block">
														<input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"
														 value="提莫队长" readonly>
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">员工电话</label>
													<div class="layui-input-block">
														<input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"
														 value="18650101564" readonly>
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">员工邮箱</label>
													<div class="layui-input-block">
														<input type="email" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">旧密码</label>
													<div class="layui-input-inline">
														<input type="password" name="password" required lay-verify="required" placeholder="请输旧入密码" autocomplete="off"
														 class="layui-input">
													</div>
													<div class="layui-form-mid layui-word-aux">辅助文字</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">新密码</label>
													<div class="layui-input-inline">
														<input type="password" name="password" required lay-verify="required" placeholder="请输新入密码" autocomplete="off"
														 class="layui-input">
													</div>
													<div class="layui-form-mid layui-word-aux">辅助文字</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">确认密码</label>
													<div class="layui-input-inline">
														<input type="password" name="password" required lay-verify="required" placeholder="请确认新密码" autocomplete="off"
														 class="layui-input">
													</div>
													<div class="layui-form-mid layui-word-aux">辅助文字</div>
												</div>
												<div class="layui-form-item">
													<div class="layui-input-block">
														<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
														<button type="reset" class="layui-btn layui-btn-primary">重置</button>
													</div>
												</div>
											</form>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-footer">
					<!-- 底部固定区域 -->
					© 中软 - JAVA二阶段项目 - 基于人脸识别的考勤系统 by TeamWork_XM
				</div>
			</div>
			<script src="../layui/layui.js"></script>
			<script>
				//JavaScript代码区域
				layui.use('element', function() {
					var element = layui.element;
				});

				//图片上传
				layui.use('upload', function() {
					var $ = layui.jquery,
						upload = layui.upload;

					//普通图片上传
					var uploadInst = upload.render({
						// 选择器s
						elem: '#test1',
						url: 'https://httpbin.org/post' //改成您自己的上传接口
							,
						accept: 'images' //视频
							,
						data: {
							'id': 'xxx'
						} //跟着员工的id一起传图片才知道这是谁的图片
						,
						auto: false //是否自动上传
							,
						bindAction: '#test9' // 绑定的上传那妞
							,
						choose: function(obj) {
							//预读本地文件示例，不支持ie8
							obj.preview(function(index, file, result) {
								$('#demo1').attr('src', result); //图片链接（base64）
							});
						},
						done: function(res) {
							//如果上传失败
							if (res.code > 0) {
								return layer.msg('上传失败');
							}
							//上传成功
						},
						error: function() {
							//演示失败状态，并实现重传
							var demoText = $('#demoText');
							demoText.html(
								'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
							demoText.find('.demo-reload').on('click', function() {
								uploadInst.upload();
							});
						}
					});
				});
				// 表单提交
				layui.use('form', function() {
					var form = layui.form;
					//监听提交
					form.on('submit(formDemo)', function(data) {
						layer.msg(JSON.stringify(data.field));
						return false;
					});
				});
			</script>
	</body>

</html>
